<!DOCTYPE html>

<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>Window Test</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link href="../../assets/css/icon/iconfont.css" rel="stylesheet" />
    <link href="../../assets/css/main.css" rel="stylesheet" />
</head>

<body>
    <script src="../../node_modules/three/build/three.js"></script>
    <script src="../../dist/ShadowEditor.js"></script>
    <script>
        var button = UI.create({
            xtype: 'button',
            text: 'Show Window',
            onClick: function () {
                var win = UI.get('testWindow');
                win.show();
            }
        });
        button.render();

        var control = UI.create({
            xtype: 'window',
            id: 'testWindow',
            width: '800px',
            height: '500px',
            shadeClose: true,

            title: '测试窗口',

            children: [{
                xtype: 'row',
                children: [{
                    xtype: 'text',
                    text: 'Username'
                }, {
                    xtype: 'input',
                    value: ''
                }]
            }, {
                xtype: 'row',
                children: [{
                    xtype: 'text',
                    text: 'Password'
                }, {
                    xtype: 'input',
                    value: ''
                }]
            }],
            buttons: [{
                xtype: 'button',
                text: '确定',
                onClick: () => {
                    UI.msg('You push ok!');
                }
            }, {
                xtype: 'button',
                text: '取消',
                onClick: () => {
                    var win = UI.get('testWindow');
                    win.hide();
                }
            }]
        });

        control.render();
    </script>
</body>

</html>